console.log("hello world");
import './style.less';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';

//存放canvas的容器
const container = document.querySelector('#app');

//创建场景
const scene = new THREE.Scene();

//创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.y = 0;
camera.position.z = 5;

//创建渲染器
const renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);


container.appendChild(renderer.domElement);

//时钟
const clock = new THREE.Clock();

//环境光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

//点光源
const pointLight = new THREE.PointLight(0xffffff, 0.5); //点光源
pointLight.position.set(5, 5, 5);
scene.add(pointLight);

//axesHelper辅助线
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

//gridHelper辅助网格
const gridHelper = new THREE.GridHelper(10, 10);
scene.add(gridHelper);

//轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0); //设置轨道控制器的目标点
controls.enableDamping = true; //开启阻尼
// controls.dampingFactor = 0.1; //阻尼系数
// controls.autoRotate = true;//自动旋转
// controls.autoRotateSpeed = 0.5; //自动旋转速度
controls.enablePan=false; //开启移动

//controls.maxDistance=6; //最大距离
//controls.maxPolarAngle=Math.PI/2; //最大纬度
// controls.maxAzimuthAngle=Math.PI/2; //最大方位角
//controls.minAzimuthAngle=-Math.PI/2; //最小方位角

// controls.addEventListener('change', () => {
//     console.log(controls.target); //获取轨道控制器的目标点
// }); //监听轨道控制器变化
controls.addEventListener('start', () => {
    console.log(controls.target); //获取轨道控制器的目标点
}); 
// controls.addEventListener('end', () => {
//     console.log(controls.target); //获取轨道控制器的目标点
// }); 
controls.update();


//TransformControls 控制对象变换
const transformControls = new TransformControls(camera, renderer.domElement);
scene.add(transformControls);
// transformControls.attach(cube); //绑定对象
transformControls.setMode('translate'); //设置变换模式
// transformControls.setSize(1.0); //设置变换尺寸
transformControls.setSpace('local'); //设置变换空间
// transformControls.showX = true; //显示X轴
// transformControls.showY = true; //显示Y轴
// transformControls.showZ = true; //显示Z轴
// transformControls.setSnap(null); //设置变换位置的捕捉点
// transformControls.setTranslationSnap(null); //设置变换位置的捕捉点
// transformControls.setRotationSnap(null); //设置变换角度的捕捉点
// transformControls.setScaleSnap(null); //设置变换缩放的捕捉点
// transformControls.update(); //更新变换控制器

// transformControls.addEventListener('change', () => {
//     console.log("transformControls",transformControls.object); //获取变换后的位置
// }); //监听变换变化

// transformControls.addEventListener('dragging-changed', () => {
//     console.log("dragging-changed",transformControls.object); //获取变换后的位置
// }); 

transformControls.addEventListener('mouseDown', () =>{
    controls.enabled=false; //禁用轨道控制器
});
transformControls.addEventListener('mouseUp', () =>{
    controls.enabled=true; //禁用轨道控制器
});

transformControls.addEventListener('objectChange', () => {
    const {position,rotation,scale} = transformControls.object;
    console.log(JSON.stringify({position,rotation:{x:rotation.x,y:rotation.y,z:rotation.z},scale})); //获取变换后的位置
}); 



//创建对象1
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
cube.position.x = -0.5;//设置位置
scene.add(cube);


//创建对象2
const geometry2 = new THREE.BoxGeometry(1, 1, 1);
const material2 = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube2 = new THREE.Mesh(geometry2, material2);
cube2.position.x = 1.5;//设置位置
cube2.rotation.x=Math.PI/4;//设置旋转角度
scene.add(cube2);

//raycaster射线检测点击对象
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

function onContainerClick(event) {    
    event.preventDefault();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects([cube, cube2]);
    const intersect=intersects[0];
    console.log(intersect);
    if (intersect) {
        transformControls.attach(intersect.object); //绑定对象
    }
}
container.addEventListener('click', onContainerClick);


function animate() {
    requestAnimationFrame(animate);

    const delta = clock.getDelta(); // 获取自上次调用以来的时间（以秒为单位）
    if(controls)
        controls.update(delta); // 更新轨道控制器

    // cube.rotation.x += 0.01;
    // cube.rotation.y += 0.01;
    //渲染
    renderer.render(scene, camera);
}
animate();

window.addEventListener('resize', onWindowResize, false);

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);  
}   
    